<template>
  <div>

	<myheader></myheader>

	<br /><br />

			<!--面包屑导航-->
			<Breadcrumb :datas="datas" ></Breadcrumb>



	<section class="featured-block text-center">
		<div class="container">


       <table>
					<tr v-for="(item,index) in search_list">
						<td style="padding:5px;">
							
							{{ index + 1 }}

						</td>
						<td style="padding:5px;">
							
							<a target="_blank" :href="'/item?id='+item.id" >{{ item.name }}</a>

						</td>
					</tr>

        </table>



		</div>
	</section>





	<footer class="footer">

		<div class="container">
			@v3u.zh
		</div>


	</footer>

  </div>

</template>



<script>

//导包
import myheader from './myheader.vue';

const loadData = function (filter, callback) {
  // this 为 option 配置
  // this.orgId 使用传递的参数获取数据，例：搜索某公司下的员工
  jsonp(`https://suggest.taobao.com/sug?code=utf-8&q=${filter}`)
    .then(response => response.json())
    .then((d) => {
      callback(d.result.map((r) => {
        return r[0];
      }));
    });
};

export default {
  data () {
    return {
      msg: "这是一个变量",
      //声明面包屑变量
      datas:[{title:'首页',route:{name:'index'}},{title:'商品检索'}],
      word:'',
      search_list:[],
            //智能提示控件
      value: '',
      param: {
        orgId: 1, // 自定义参数传递
        loadData,
        minWord: 1
      }

    }
  },
  //注册组件标签
  components:{

  		'myheader':myheader

  },

  //监听属性
  watch:{

  	$route(to,from){

  		//window.location.href = 'http://localhost:8080/search';
  		//刷新页面
  		this.$router.go(0);
  	}


  },
  mounted:function(){

    //接收参数
    var word = this.$route.query.word;

    this.word = word

	console.log(this,word)
	this.goodssearch();






},
  methods:{

  	goodssearch(){

      if(this.word !=""){

		//获取数据
        this.axios.get('http://localhost:8000/goodssearch/',{params:{word:this.word}}).then((result) =>{

                console.log(result);
                //赋值
                this.search_list=result.data

              	if(this.search_list.length == 0){

  							this.$Message("对不起，暂时没有您要的商品");

  						}



        });
      }



  	}


  }
}


</script>

<style>



</style>
